
<template>
	<view class="swrapper">
		<text class="toptop" style="font-size: 35rpx;">发起公务接待审批</text>
		<view class="top" style="color: #9C5F07;font-size: 28rpx;">
			<view class="text1">
				<image  style="width: 30rpx;height: 30rpx;"  src="/static/meet2.png" mode=""></image>
				<text style="padding-left: 15rpx;">审批说明：</text>
			</view>
			<view class="text2"  style="margin-right: 10rpx;padding-left: 15rpx;">
				根据：本年度测算，本年度出差费用用为所有费用的10%，即公90923元
			</view>
		</view>
		<view class="kemu">
			<view class="left">
				经费科目：
			</view>
			<view class="right" style="color: #4F81E7;font-size: 30rpx;">
				公务接待费用
			</view>
		</view>
		<view class="img">
				<img src="@/static/bcgg.jpg" alt="" style="width: 100%; height: 200rpx; margin-top: -20rpx;">
			<!-- <img src="/static/bcg.jpg" alt="" class="imgitem"> -->
		</view>
		<view class="alist">
			<view class="a1">
				经费使用情况（剩余）
			</view>
			<view class="a2">
				<text style="font-size: 35rpx;padding-right:10rpx;">11820</text> 元
			</view>
			<view class="a3">
				项目第一季度团建活动
			</view>
			<view class="a4">
				年份：2022年
			</view>
			<view class="a5">
				查看明细
			</view>
		</view>
		
		
		
		<view class="table1">
			<u-form :model="form"  border-bottom='false'>
				<u-form-item label="接待事由:"   border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a1" border='false' placeholder="请输入" type="select" />
					
				</u-form-item>
				<u-form-item label="来访单位:"  border-bottom='false' :labelWidth='140' style="font-size: 10rpx;" >
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="来访人数:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a3" border='false' placeholder="请输入" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="来访时间:"  border-bottom='false' :labelWidth='140'>
					<!-- <u-input v-model="form.a3" border='false' placeholder="请输入" type="select"/> -->
					<u-calendar :show="show" :mode="mode" @confirm="confirm" ></u-calendar>
					<image  class="fun" src="../../static/fun.png" mode="" @click="show=true" ></image>
				</u-form-item>
				<u-form-item label="预计离开时间:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a7" border='false' type="select"/>
				</u-form-item>
				<u-form-item label="来访天数:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a4" border='false' placeholder="请输入" type="select"/>
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				
			</u-form>
		</view>
		
		
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">住宿预算</view>
		<view class="table1">
		 <u-form  :model="form">
			 <u-form-item label="房间类别:"  border-bottom='false' :labelWidth='140'>
			 	<u-input v-model="form.a2" border='false' placeholder="请选择" type="select" />
			 	<image  class="fun" src="../../static/fun.png" mode=""></image>
			 </u-form-item>
			 <u-form-item label="人数:"  border-bottom='false' :labelWidth='140'>
			 	<u-input v-model="form.a2" border='false' placeholder="请选择" type="select" />
			 	<image  class="fun" src="../../static/fun.png" mode=""></image>		
			 </u-form-item>
			 <u-form-item label="标间:"  border-bottom='false' :labelWidth='140'>
			 	<u-input v-model="form.a2" border='false' placeholder="请选择" type="select" />
			 	<image  class="fun" src="../../static/fun.png" mode=""></image>
			 </u-form-item>
			 <u-form-item label="宿舍费用合计(元):"  border-bottom='false' :labelWidth='140'>
			 	<u-input v-model="form.a5" border='false'  type="select" />
			 </u-form-item>
			 <u-form-item label=""  border-bottom='false' :labelWidth='140'>
			 	<button type="default" style="background-color:#ff5050;color: #FFFFFF;width: 250rpx;height: 100rpx;margin-right: -10rpx;">删除</button>
			 </u-form-item>
			 
			 
			 <u-form-item label=""  border-bottom='false' :labelWidth='140'>
			 	<view class="one">
			 		 <view style="text-align: center;line-height: 80rpx;">
			 			 <view class="yuan">
			 			 	
			 			 </view>
			 			 <text style="font-size: 40rpx;margin-right: 5rpx; margin-top: 10rpx" >+</text>
			 			 增加房间类型
			 		 </view> 
			 	</view>	
			 </u-form-item>
			 
		 </u-form>
		</view>
		
		
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">陪同人员</view>
		<view class="table1">
			<u-form :model="form">
				<u-form-item label="陪同人数:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="陪同人姓名:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
			
			</u-form>
		</view>
		
		
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">伙食费</view>
		<view class="table1">
			<u-form :model="form">
				<u-form-item label="就餐次数:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="标准:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
			
			<u-form-item label="伙食费用合计(元):"  border-bottom='false' :labelWidth='140'>
				<u-input v-model="form.a6" border='false' placeholder="请输入" type="select" />
				<image  class="fun" src="../../static/fun.png" mode=""></image>
			</u-form-item>
			</u-form>
		</view>
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">其他费用</view>
		<view class="table1">
			<u-form :model="form">
				<u-form-item label="其他费用(元):"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
				<u-form-item label="其他费用说明:"  border-bottom='false' :labelWidth='140'>
					<u-input v-model="form.a2" border='false' placeholder="请输入" type="select" />
					<image  class="fun" src="../../static/fun.png" mode=""></image>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="qwe" style="margin: 20rpx 50rpx; font-size: 35rpx;">审批流程</view>
		
		<view class="mbox" >
			<view class="" style="margin-top: 10rpx;">
				<view class="lei">
					<image src="/static/meet1.png" mode="" ></image>
					<text style="padding-left: 10rpx;">部门领导:</text>
					<view class="txt">
						 <text style="padding-left: 40rpx;padding-right: 25rpx;">朱小可</text>
					</view>
		           
				</view>
				<view class="line"></view>
			</view>
		</view>
		
		<view class="btn" >提交</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				mode:'single',
				form:{
				   a1:'',
				   a2:'',
				   a5:'1260',
				   a6:'690',
				   a7:'2022-11-20'
				},
				
		
			}
		},
		methods:{
             confirm(e) {
            console.log(e);
			this.show=false
     }
		}
	}
</script>

<style lang="scss" scoped>
	.yuan{
		display: inline-block; 
		width: 30rpx;
		height: 30rpx;
		border: #548EEB 2px solid;
		border-radius: 50rpx;
		position: absolute;
		top: 24rpx;
		left: 138rpx;
		
	}
	.one{
			width: 500rpx;
			height: 80rpx;
			color: #548EEB;
			margin-left: 80rpx;
		    font-size: 30rpx;
			border: 3rpx #548EEB solid;
			border-radius: 30rpx;
			position: relative;
	}
	.mbox{
		border: 1rpx solid #fff; 
		padding-left: 31rpx;
		padding-right: 30rpx;
		background-color: #fff;
	}
	.txt{
		width: 170rpx;
		height: 50rpx;
		color: #548EEB;
		margin-top: 30rpx;
		float: right;
	    font-size: 30rpx;
		border: 3rpx #548EEB solid;
		border-radius: 35rpx;
	}
	
	.line{
		width: 700rpx;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		border-bottom: #F4F4F4 5rpx solid;
	}
	
   .lei image{
       margin-top: 20rpx;
	   width: 50rpx;
	   height: 50rpx;
   }
	
	.fun{
		width: 20rpx;
		height: 20rpx;
		
	}
	
	.swrapper{
		background-color: rgb(244, 244, 244);
		padding: 20rpx 0rpx;
		
		.toptop{
			font-size: 38rpx;
			margin-left: 50rpx;
			margin-top: 30rpx;
		}
		
		
		.top{
			margin-top: 10rpx;
			width: 100%;
			background-color: #FDFFC6;
			color: #EBC74B;
			padding: 50rpx 50rpx;
			font-size: 30rpx;
			.text2{
				margin-top: 20rpx;
			}
		}
		.kemu{
			background-color: rgb(255, 255, 255);
			display: flex;
			justify-content: space-between;
			padding:50rpx 30rpx;
		}
		.img{
				// background-color: blue;
				color: white;
				width: 100%;
				// padding: 10rpx 0rpx;
				position: relative;
		}
		.alist{
			color: white;
			
			.a1{
				font-size: 33rpx;
				position: absolute;
				left: 30rpx;
				top: 465rpx;
			}
			.a2{
				font-size: 33rpx;
				position: absolute;
				left: 580rpx;
				top: 465rpx;
			}
			.a3{
				font-size: 28rpx;
				position: absolute;
				left: 30rpx;
				top: 530rpx;
			}
			.a4{
				font-size: 25rpx;
				position: absolute;
				left: 30rpx;
				top: 570rpx;
			}
			.a5{
				border: 1px solid white;
				border-radius: 50rpx;
				padding: 10rpx;
				font-size: 28rpx;
				position: absolute;
				left: 580rpx;
				top: 530rpx;
			}
		 }
		 
		 
		 .table1{
		 	background-color: rgb(255, 255, 255);
		 	// background-color: red;
		 	padding: 0rpx 50rpx;
		 }
		 .table2{
		 	background-color: rgb(255, 255, 255);
		 	// background-color: red;
		 	padding: 0rpx 50rpx;
		 	.sss{
		 
		 			margin-top: 100000rpx;
		 		
		 	}
		 	.tongxing{
		 		width: 150rpx;
		 		// height: 50rpx;
		 		border:1rpx solid blue;
		 		line-height: 50rpx;
		 		text-align: center;
		 		padding: 20rpx;
		 		border-radius: 30rpx;
		 		margin: 0rpx auto;
		 	}
		 }
		 
		 
		 .qwe{
		 	font-size: 38rpx;
		 	margin-left: 50rpx;
		 	margin-top: 30rpx;
		 }
		 
		 .btn{
		 	width: 700rpx;
		 	height: 100rpx;
		 	background-image: linear-gradient(to right, #548EEB, #446FE0);
		 	// background-color: blue;
		 	text-align: center;
		 	line-height: 100rpx;
		 	margin: 5rpx auto;
		 	font-size: 34rpx;
		 	color: white;
		 	border-radius: 50rpx;
		 }
	}
</style>